<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RegExp</title>
    <script>
      /* 
        RegExp(regular expression) 
        正则表达式对象,它是一种特殊格式的字符串,这种格式用来定义一套字符串模版,用来匹配的数据

        知识点1: 正则表达式的语法
        [a]         a
        [ab]        a或者b
        [^ab]       除了a或者b以外

        [a-z]       a到z中任何一个字母(包含)
        [0-9]       0到9的任意整数(包含) 

        +           一个或者多个
        *           0个或者多个
        ?           0个或者1个
        
        {m}         重复m次
        {m,}        最少m次,最多无上限
        {m,n}       最少m次,最多n次

        \d          [0-9]数字
        \w          [A-Za-z0-9_] 任意字符
        |           或者
        ^           正则表达式开头
        $           正则表达式结尾
        注意: 
            精确匹配正则前后需要加上^$,模糊匹配则不写


        知识点2: JS中如何使用正则表达式对象进行检测匹配

        正则表达式模式:
            g       全局模式
            i       忽略大小写模式

        RegExp
          test()        匹配正则表达式,返回布尔类型,即匹配成功返回true,失败返回false
          exec()        匹配正则表达式,返回匹配到的内容,默认情况下,返回第一个匹配结果,放入到数组中
                        如果内容中有多个内容均能匹配正则表达式,则我们可以开启全局模式来进行通配

          另外: string内置对象中也有一个匹配函数,用来替代exec()函数    
                match()     把所有匹配到的结果放入到数组中     
                注意: 如果全匹配的话需要开启全局模式
      */
    </script>
  </head>
  <body>
    <input type="text" /><span></span>

    <script>
      //创建正则表达式对象
      //方式一: 不推荐
      //const reg = new RegExp('^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$')

      //方式二: 简化写法
      //const reg = /^\s*\w+(?:.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+\s*$/
      //const reg = /\s*\w+(?:.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+\s*/
      //开启全局模式
      const reg = /\s*\w+(?:.{0,1}[\w-]+)*@[a-z0-9]+(?:[-.][a-z0-9]+)*\.[a-z]+\s*/gi

      //正则匹配
      //重点
      //console.log(reg.test('414687091@qq.com')) //布尔类型

      //了解
      //console.log(reg.exec('@@@@@@@@@@@@@@@@@@414687091@qq.com@@@@@@@@@@@8888888888@QQ.com@@@@@@@'))
      //console.log(reg.exec('@@@@@@@@@@@@@@@@@@414687091@qq.com@@@@@@@@@@@8888888888@QQ.com@@@@@@@'))
      //console.log(reg.exec('@@@@@@@@@@@@@@@@@@414687091@qq.com@@@@@@@@@@@8888888888@QQ.com@@@@@@@'))

      //重点
      console.log('@@@@@@@@@@@@@@@@@@414687091@qq.com@@@@@@@@@@@8888888888@QQ.com@@@@@@@'.match(reg))

      document.querySelector('input').onkeyup = function () {
        if (!reg.test(this.value)) {
          this.nextElementSibling.innerHTML = '邮箱格式不合法!'
        } else {
          this.nextElementSibling.innerHTML = 'OK'
        }
      }
    </script>
  </body>
</html>
